<template>
  <div :class="{ search_height: lgt.nameH1, search_bgc: lgt.title }">
    <div class="w">
      <div class="search_input">
        <h1 class="search_bt" v-if="lgt.nameH1">{{ nameH1 }}</h1>
        <div :class="{ search_padTop: lgt.nameH1, search_s: lgt.title }">
          <a-input class="search_ss" style="border-radius: 50px; padding-left: 40px" v-model:value="value.title"
            placeholder="示例：办公用品 蒙牛乳业，多个关键词用空格隔开" />
          <div class="search_buttons" @click="popularSearches">
            <img style="margin-right: 4px; width: 21px; height: 21px" src="@/assets/img/sousuo.png" alt="" />
            查询
          </div>
        </div>
        <div class="popular_box">
          热门搜索：<span class="popular" v-for="item in popularLiss" :key="item.id" @click="insearch(item.hot_name)">{{
    item.hot_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRadio1Store, useSearchStore } from "@/pain/search/search";
import { onMounted, ref, reactive } from "vue";
import { getHotSearch } from "@/Api/shoop/index";
import { useRouter } from "vue-router";
const router = useRouter();
// console.log(router.currentRoute.value.params.id);

let nameH1 = ref("");
let lgt = reactive({
  title: false,
  nameH1: false,
});
let value = ref({
  title: "",
});
const signalsRadio1 = useRadio1Store();
let useSearch = useSearchStore();
signalsRadio1.title = value;
let popularLiss = ref([]);
const insearch = (data) => {
  value.value.title = data;
  if (signalsRadio1.page.currentPage > 1) {
    signalsRadio1.page.currentPage = 1;
  }
  if (signalsRadio1.id == "1") {
    signalsRadio1.getsearchs();
  } else if (signalsRadio1.id == "2") {
    signalsRadio1.getsuppliers();
  } else if (signalsRadio1.id == "3") {
    signalsRadio1.getbuyers();
  } else if (signalsRadio1.id == "4") {
    signalsRadio1.getbrands();
  } else if (signalsRadio1.id == "5") {
    signalsRadio1.getforecasts();
  } else if (signalsRadio1.id == "7") {
    signalsRadio1.getenderings();
  } else if (signalsRadio1.id == "8") {
    signalsRadio1.getcompanys();
  } else if (signalsRadio1.id == "6") {
    signalsRadio1.getprojects();
  }
};

const getpopularLiss = () => {
  getHotSearch().then((res) => {
    let {
      data: { data },
    } = res;
    // console.log("12", data);
    popularLiss.value = data;
  });
};
const conditions = () => {
  if (nameH1.value != "") {
    lgt.nameH1 = true;
    useSearch.flg = true;
    value.value.title = nameH1.value;
    lgt.title = false;
  } else {
    lgt.title = true;
    lgt.nameH1 = false;
    useSearch.flg = false;
    // value.value.title = "";
  }
};
value.value.title =
  router.currentRoute.value?.params.id || router.currentRoute.value.query.name;

conditions();
onMounted(() => {
  // console.log(router.currentRoute)
  getpopularLiss();
});

// 搜索
const popularSearches = () => {
  if (router.currentRoute.value.path == "/webseo") {
    router.push("/search");
  }
  if (signalsRadio1.page.currentPage > 1) {
    signalsRadio1.page.currentPage = 1;
  }
  if (signalsRadio1.id == "1") {
    signalsRadio1.getsearchs();
  } else if (signalsRadio1.id == "2") {
    signalsRadio1.getsuppliers();
  } else if (signalsRadio1.id == "3") {
    signalsRadio1.getbuyers();
  } else if (signalsRadio1.id == "4") {
    signalsRadio1.getbrands();
  } else if (signalsRadio1.id == "5") {
    signalsRadio1.getforecasts();
  } else if (signalsRadio1.id == "7") {
    signalsRadio1.getenderings();
  } else if (signalsRadio1.id == "8") {
    signalsRadio1.getcompanys();
  } else if (signalsRadio1.id == "6") {
    signalsRadio1.getprojects();
  }
};
</script>

<style lang="scss" scoped>
.search_height {
  width: 100%;
  height: 251px;
  background: url("@/assets/img/sousuo_bgc.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.search_bgc {
  width: 100%;
  height: 180px;
  background: url(../../assets/newimg/search.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

.search_input {
  display: flex;
  flex-direction: column;

  // margin-left: 175px;

  .search_bt {
    margin: 35px 0;
    font-size: 36px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }

  .search_padTop {
    position: relative;
    padding-top: 0;
    text-align: center;

    .search_ss {
      // display: flex;
      width: 850px;
      height: 60px;
      border-radius: 50px;
      border: 1px solid #f6f6f6;
    }

    .search_buttons {
      position: absolute;
      top: 2px;
      right: 177px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 56px;
      background-color: #f43107;
      border-radius: 50px;
      font-size: 22px;
      color: #fff;
    }
  }

  .search_s {
    position: relative;
    padding-top: 50px;
    text-align: center;

    .search_ss {
      // display: flex;
      width: 850px;
      height: 60px;
      border-radius: 50px;
      border: 1px solid #f6f6f6;
    }

    .search_buttons {
      position: absolute;
      top: 52px;
      right: 177px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 56px;
      background-color: #f43107;
      border-radius: 50px;
      font-size: 22px;
      color: #fff;
    }
  }

  .popular_box {
    margin-top: 20px;
    margin-left: 175px;
    font-size: 14px;
    color: #ffffff;
  }

  .popular {
    margin-left: 15px;
  }
}
</style>
